<template>
    <div>
        <van-cell-group>
            <van-cell>
                <h3>审批人</h3>
            </van-cell>
            <div class="u-list">
                <van-row>
                    <van-col v-for="item in value" :key="item.userKey" span="6" class="avatar">
                        <img src="../../../assets/image/user-images.jpg"/>
                        {{item.name}}
                        <template v-if="item.deptName">/{{item.deptName}}</template>
                        <van-icon @click="remove(item)">-</van-icon>
                    </van-col>
                    <van-col span="6">
                        <van-button icon="plus" type="default" is-link @click="openUserDialog"/>
                    </van-col>
                </van-row>
            </div>
        </van-cell-group>

        <flow-org-user-popup ref="flowOrgUserPopup" v-if="actorDeptList.length > 0" :actorDeptList="actorDeptList"
                             :selected="selected"
                             @checkUser="checkUser" :isRadio="isRadio"></flow-org-user-popup>

        <flow-user-popup ref="flowUserPopup" v-if="actorUserList.length > 0" :actorUserList="actorUserList"
                         :selected="selected"
                         @selectUser="selectUser" :isRadio="isRadio"></flow-user-popup>
    </div>
</template>

<script>

    import flowOrgUserPopup from './flowOrgUserPopup';
    import flowUserPopup from './flowUserPopup';

    export default {
        name: 'userGroup',
        components: {
            flowOrgUserPopup,
            flowUserPopup,
        },
        props: {
            actorUserList: {
                type: Array,
                default: () => [],
            },
            actorDeptList: {
                type: Array,
                default: () => [],
            },
            value: {
                type: Array,
                required: true,
            },
            isRadio: {
                type: Boolean,
                default: false,
            }
        },
        data() {
            return {}
        },
        computed: {
            selected() {
                return this.value.map(item => item.userKey);
            }
        },
        methods: {
            remove(removeItem) {
                const data = this.value.filter(item => item.userKey != removeItem.userKey)
                this.$emit('input', data)
            },
            selectUser(addItem) {
                if (this.isRadio) {
                    const data = [addItem];
                    this.$emit('input', data)
                } else {
                    const user = this.value.find(item => item.userKey == addItem.userKey);
                    if (!user) {
                        const data = [...this.value, addItem];
                        this.$emit('input', data)
                    }
                }
            },
            checkUser(addItems, removeItems) {
                if (this.isRadio) {
                    const data = [addItems[0]];
                    this.$emit('input', data)
                } else {
                    const removeUserArr = removeItems.map(item => item.userKey);
                    let data = this.value.filter(item => removeUserArr.indexOf(item.userKey) == -1);
                    const selected = data.map(item => item.userKey);
                    const addUsers = addItems.filter(item => selected.indexOf(item.userKey) == -1);
                    data = [
                        ...data,
                        ...addUsers
                    ];
                    this.$emit('input', data)
                }
            },
            openUserDialog() {
                if (this.actorUserList.length > 0) {
                    this.$refs.flowUserPopup.show();
                } else if (this.actorDeptList.length > 0) {
                    this.$refs.flowOrgUserPopup.show();
                } else {
                    this.$notify({type: 'warning', message: "无候选人"});
                }
            }
        }
    }
</script>
